<template>
  <div class="wrapper">
    <el-button type="primary" size="small" icon="el-icon-refresh-left" @click="getList">刷新
    </el-button>

    <!-- 表格数据 -->
    <el-table style="margin-top: 15px" :data="tableData" v-loading="listLoading" border>
      <el-table-column prop="CourseName" label="课程名称" width="120" align="center"/>
      <el-table-column prop="TrainingContent" label="培训内容" align="center"/>
      <el-table-column prop="VideoIDs" label="视频ID" width="120" align="center">
        <!--        <template v-slot="{ row }">-->
        <!--          {{ getVideoFind(row.VideoIDs).Title }}-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column prop="DocumentIDs" label="文档ID" width="120" align="center"/>
      <el-table-column prop="questionid" label="试题ID" width="120" align="center"/>
      <el-table-column prop="times" label="时间" width="120" align="center"/>
      <el-table-column prop="type" label="课程类型" width="120" align="center">
        <template v-slot="{ row }">
          {{ ['日常培训', '岗前培训'][row.type - 1] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center" fixed="right">
        <template v-slot="{ row }">
          <el-button type="text" title="编辑" @click="handle(row, false)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增 or 编辑框-->
    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false" :title="findData.ID ? '编辑' : '新增'" width="800px" :visible.sync="Visible" @closed="resetDialog">
      <el-form v-loading="loading" size="small" class="formRow" label-position="top">
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="课程名称" prop="CourseName">
              <el-input v-model="findData.CourseName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="课程类型" prop="type">
              <el-select class="w100" v-model="findData.type"
                         placeholder="请选择" disabled>
                <el-option
                    label="日常培训"
                    value="1">
                </el-option>
                <el-option
                    label="岗前培训"
                    value="2">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="时间" prop="times">
              <el-input v-model="findData.times"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="培训内容" prop="TrainingContent">
              <el-input type="textarea" :rows="3" class="w100" v-model="findData.TrainingContent"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="视频" prop="VideoIDs">
              <div class="openView" @click="clickVideo">
                点击进入视频管理
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="文档" prop="DocumentIDs">
              <div class="openView" @click="clickDocument">
                点击进入文档管理
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="试题" prop="DocumentIDs">
              <div class="openView" @click="clickQuestions">
                点击进入试题管理
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer">
        <span style="color:#999;margin-right: 15px;font-size: 13px">操作视频、文档、试题后记得保存以免造成数据丢失</span>
        <el-button type="primary" size="small" :loading="loading" @click="onSubmit">保存</el-button>
      </div>
    </el-dialog>
    <examDocument ref="document" @change="documentChange"/>
    <examVideo ref="video" @change="videoChange"/>
    <examQuestions ref="questions" @change="questionsChange"/>
  </div>
</template>

<script>
import {
  Query_course,
  Add_course,
  Update_course,
  Querying_Video_Information,
  Query_document_information,
  Delete_question_information,
  Querying_question_Information
} from "@/api/index"
import {get_head_img} from "@/utils/index"
import moment from "moment"
import examDocument from "./components/document.vue"
import examVideo from "./components/video.vue"
import examQuestions from "./components/questions.vue"

export default {
  name: "examination",
  components: {
    examDocument, examVideo, examQuestions
  },
  data() {
    return {
      // 加载
      listLoading: false,
      // 详情弹窗
      Visible: false,
      updateVisible: false,
      // 搜索用户相关
      paramsState: {},
      // 用户列表相关
      tableData: [],
      // 详情加载中
      loading: false,
      type: 'rgxd',

      // 操作的数据信息
      findData: {
        id: '',
        CourseName: '',
        TrainingContent: '',
        VideoIDs: '',
        DocumentIDs: '',
        times: '',
        type: ''
      },
      fields: [
        {label: '课程名称', prop: 'CourseName', width: '', align: 'center'},
        {label: '培训内容', prop: 'TrainingContent', width: '500', align: 'center'},
        {label: '视频ID', prop: 'VideoIDs', width: '', align: 'center'},
        {label: '文档ID', prop: 'DocumentIDs', width: '', align: 'center'},
        {label: '时间', prop: 'times', width: '', align: 'center'},
        {label: '类型', prop: 'type', width: '', align: 'center'}
      ],
      videoList: [],
      documentList: [],
    }
  },
  methods: {
    // 绑定试题数据变化
    questionsChange(id) {
      this.findData.questionid = id;
    },
    // 查看试题列表
    clickQuestions() {
      this.$refs.questions.show = true;
      this.$refs.questions.open(this.findData.questionid);
    },
    // 绑定视频数据变化
    videoChange(ids) {
      this.findData.VideoIDs = ids;
    },
    // 查看视频列表
    clickVideo() {
      this.$refs.video.show = true;
      this.$refs.video.open(this.findData.VideoIDs.split(",").filter(item => item != ""));
    },
    // 绑定文档数据变化
    documentChange(ids) {
      this.findData.DocumentIDs = ids;
    },
    // 查看文档列表
    clickDocument() {
      this.$refs.document.show = true;
      this.$refs.document.open(this.findData.DocumentIDs.split(",").filter(item => item != ""));
    },
    dateFormat(date) {
      let expirationDate = moment(date)
      // 获取当前时间
      let now = moment()
      // 计算时间差
      let duration = moment.duration(expirationDate.diff(now)).days()
      if (duration < 0) {
        return "已过期"
      } else {
        return duration + "天"
      }
    },
    change(file) {
      let _this = this
      console.log(file.raw)
      let reader = new FileReader()
      reader.onload = function (event) {
        let base64 = event.target.result
        _this.findData.headimg = base64
      }
      reader.readAsDataURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const types = ['image/jpeg', 'image/png']
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!types.includes(file.type)) {
        this.$message.error('上传头像图片只能是 JPG 和 PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    changeDate(event) {
      if (event) {
        let times = event.map(item => this.format(item))
        let [startTime, endTime] = times
        this.paramsState.startTime = startTime
        this.paramsState.endTime = endTime
      }
      this.paramsState.pageCurrent = 1
      this.getList()

    },
    format(time, end = "HH:mm:ss") {
      return moment(time).format(`YYYY-MM-DD ${end}`)
    },
    async getList() {
      this.listLoading = true
      try {
        let params = {
          ...this.paramsState
        }

        delete params.time
        delete params.total

        let result = await Query_course(params)
        this.tableData = result
        this.listLoading = false

        // this.paramsState.total = result.data.total
        console.log(result)
      } catch (error) {
        this.listLoading = false
        this.$message.error("获取列表失败，请重试")
      }
    },
    resetDialog() {
      this.findData = {}
    },
    // 保存
    onSubmit() {
      this.loading = true;
      let request;
      let params = {
        ...this.findData,
        id: this.findData.ID
      }
      if (params.ID) {
        request = Update_course;
      } else {
        request = Add_course;
      }
      console.log(params, "提交参数")

      request(params).then(result => {
        console.log(result, "处理订单")
        this.$message.success(result.msg)
        this.getList();
        this.Visible = false
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 显示详情
    handle(row, readonly = false) {
      let params = {
        ...row,
        readonly
      }
      this.findData = params;
      this.Visible = true;
    },
    // 操作
    update(row) {
      this.findData = {
        id: row.id
      }
      this.updateVisible = true
    },
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.table-avatar {
  width: 40px;
  height: 40px;
}

::v-deep .image-table-slot {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
}

.wrapper {
  margin: 20px;

  .label {
    font-size: 14px;
    color: #333;
    padding-bottom: 10px;
  }
}

::v-deep .el-dialog__header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
}

.formRow {
  .openView {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    box-shadow: 0 3px 10px 1px rgba(90, 156, 248, .2);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: .4s;

    &:hover {
      box-shadow: 0 3px 10px 1px rgba(90, 156, 248, .4);
    }
  }


  .el-col {
    padding: 8px 0;

    .label {
      font-weight: 500;
      margin-right: 10px;
      color: #444;
    }

    .headimg_view {
      margin-left: 50%;
      transform: translateX(-50%);
      overflow: hidden;

      .avatar {
        width: 120px;
        height: 120px;
        font-size: 0;
      }

      ::v-deep .image-slot {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #eee;

        .iocn {
          font-size: 20px;
        }

        span {
          font-size: 14px;
        }
      }
    }
  }

  .sourceList {
    .item {
      padding: 10px;
      background-color: #f8f8f8;
      border-bottom: 1px solid #ddd;

      &:last-child {
        border-bottom: 0;
      }

      .box {
        padding: 5px 0;
        display: flex;

        .label {
          color: #666;
          padding-right: 20px;
        }
      }
    }
  }
}

.dataList {
  margin-bottom: 20px;

  .desc {
    margin-top: 10px;
    color: #888;
  }

  .dataTitle {
    font-weight: 500;
    color: #333;
  }
}

//::v-deep .el-form-item__label {
//  width: 100%;
//}

.flex {
  display: flex;

  span {
    b {
      color: #f46162;
    }
  }

  &.between {
    justify-content: space-between;
  }
}
</style>
